<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>layout 后台大布局 - Layui</title>
		<link rel="stylesheet" href="./layui/css/layui.css" />
		<link rel="stylesheet" href="./ayq/modules/formDesigner.css" />
		<link rel="stylesheet" href="./ayq/modules/cron.css" />
		<link rel="stylesheet" href="./ayq/modules/labelGeneration.css" />
		<link rel="stylesheet" href="./ayq/modules/formPreview.css" />
		<style>

		</style>
	</head>

	<body>
		<div>
			<div>

				<button type="button" class="layui-btn" id="importJson">导入数据</button>
				<button type="button" class="layui-btn layui-btn-danger" id="globalDisable">禁用表单</button>
				<button type="button" class="layui-btn layui-btn-normal" id="globalNoDisable">启用表单</button>
				<button type="button" class="layui-btn layui-btn-warm" id="getFormData">获取表单数据</button>
			</div>
			<!-- <div id="testdemo" style="margin: 20px 20px;padding: 20px 20px;border: 1px solid #009688;">

			</div> -->
			<div class="layui-row">
				<div class="layui-col-md3" style="margin-top: 100px;">
					<!-- 一级树 -->
					<div id="demoleft" class="demo-tree-more"
						style="margin: 20px 20px;padding: 20px 20px;border: 1px solid #009688;"></div>
				</div>
				<div class="layui-col-md9">
					<!-- 表单表格 -->
					<div id="demoright" style="margin: 20px 20px;padding: 20px 20px;border: 1px solid #009688;">
						
					</div>
				</div>

			</div>
		</div>
		<div class="importjsoncodeview" style="display: none;">
			<textarea class="site-demo-text" id="import-json-code-view"></textarea>
			<a href="javascript:;" class="layui-btn layui-btn-normal" style="margin-right:20px;"
				id="import-json-code">导入数据</a>
		</div>
		<div class="getFormData" style="display: none;">
			<textarea class="site-demo-text" id="get-form-data"></textarea>
		</div>
		<script type="text/javascript" src="./layui/layui.js"></script>
		<script type="text/javascript" src="./ayq/modules/Sortable/Sortable.js"> </script>
		<script type="text/javascript" src="./ayq/modules/iceEditor/iceEditor.js"></script>
		<script type="text/javascript" src="js/global.js"></script>

		<script>
			var demojs = [];
			console.log("sdadasads" + demojs)
			//JavaScript代码区域
			layui.config({
				base: './ayq/modules/'
			}).use(['formPreview', 'tree', 'form', 'layer', 'upload'], function() {
				var layer = layui.layer;
				var $ = layui.jquery;
				var upload = layui.upload;
				var index = layui.index;
				var formPreview = layui.formPreview;
				var form = layui.form;
				var tree = layui.tree;
				var render;

				//模拟数据
				$.ajax({
					type: "post",
					url: globalData.server + "process/getAllProcess", //查询到所有json格式数据
					dataType: "json",
					success: function(data) {
						/* 	for (var i = 0; i < data.length; i++) {
								console.log(i)
							} */
						/* 	datas = [{
								title: data[0].formtitle,
								id: 1,
								field: 'name1'
							}] */

						//渲染一级树数据
						tree.render({
							elem: '#demoleft',
							data: data,
							id: 'demoId1',
							click: function(obj) {
								//alert("1")
								//alert("2我是表单id："+obj.data.id)
								//console.log("我是表单数据："+obj.data.content);
								console.log("我是表单id：" + obj.data.id);
								if (obj.data.id != null) {
									$.ajax({
										url: globalData.server + "process/getFormById" +
											"?" + obj.data.id, // 提交到controller的url路径
										type: "post", // 提交方式
										data: {
											"id": obj.data.id
										}, // data为String类型，必须为 Key/Value 格式。
										dataType: "json", // 服务器端返回的数据类型

										success: function(data) {
											//console.log(obj.data.content)
											//alert("3我是表单id："+obj.data.id+"的数据"+obj.data.content)
											var ss = obj.data.content;
											console.log("----根据id查询出来的内容:" + ss)
											//layer.open("preview.html")
											var demojs = JSON.parse(obj.data.content)
											//alert("4我是表单id："+obj.data.id+"转换后的json格式数据"+demojs)
											console.log("转换后的json数据：" + demojs)
											window.localStorage.setItem('lse', ss)
											window.localStorage.getItem('lse')
											var demojses = JSON.parse(window
												.localStorage.getItem('lse'))
											//alert("5我是render："+render)
											render = formPreview.render({
												elem: '#demoright',
												data: demojses, //json数据渲染到页面上
												//formData: {"textarea_1":"123","input_2":"123","password_3":"123"}
												content: ['./preview.html',
													'yes'
												]
											});

											//iframe的url，no代表不显示滚动条
											window.localStorage.setItem("ss", ss)
											/* $("form").remove(); //移除当前表单，避免追加
											$("#demoright").append($(obj.data.content));//往右边追加数据
											form.render(); */

										},
									});
								} else {

								}

							}

						});
					},
					error: function(jqXHR) {
						alert("发生错误：" + jqXHR.status);
					}
				});
				//layer.load(2, {time: 2*1000});
				if (window.localStorage.getItem('layui_form_json') !== undefined) {
					demojs = JSON.parse(window.localStorage.getItem('layui_form_json')); //生成的预览数据 
					console.log("111111122222333333:" + window.localStorage.getItem('layui_form_json'))
					console.log("-----------------------------" + JSON.parse(window.localStorage.getItem(
						'layui_form_json')))
					console.log("我是生成的数据：" + window.localStorage.getItem('layui_form_json'))
					render = formPreview.render({
						elem: '#demoright',
						data: demojs, //json数据渲染到页面上
						anim: 2
						//formData: {"textarea_1":"123","input_2":"123","password_3":"123"}
					});

					var images = render.getImages();
					for (var i = 0; i < images.length; i++) {
						upload.render({
							elem: '#' + images[i].select,
							url: '' + images[i].uploadUrl + '',
							multiple: true,
							before: function(obj) {
								layer.msg('图片上传中...', {
									icon: 16,
									shade: 0.01,
									time: 0
								})
							},
							done: function(res) {
								layer.close(layer.msg()); //关闭上传提示窗口
								//上传完毕
								$('#uploader-list-' + item.id).append(
									'<div id="" class="file-iteme">' +
									'<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>' +
									'<img style="width: 100px;height: 100px;" src=' + res.data.src +
									'>' +
									'<div class="info">' + res.data.title + '</div>' +
									'</div>'
								);
							}
						});
					}

					var filesData = render.getFiles();
					for (var i = 0; i < filesData.length; i++) {
						upload.render({
							elem: '#' + filesData[i].select,
							elemList: $('#list-' + filesData[i].select) //列表元素对象
								,
							url: '' + filesData[i].uploadUrl + '',
							accept: 'file',
							multiple: true,
							number: 3,
							auto: false,
							bindAction: '#listAction-' + filesData[i].select,
							choose: function(obj) {
								var that = this;
								var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
								//读取本地文件
								obj.preview(function(index, file, result) {
									var tr = $(['<tr id="upload-' + index + '">', '<td>' + file
										.name + '</td>', '<td>' + (file.size / 1014).toFixed(
											1) + 'kb</td>',
										'<td><div class="layui-progress" lay-filter="progress-demo-' +
										index +
										'"><div class="layui-progress-bar" lay-percent=""></div></div></td>',
										'<td>',
										'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
										'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
										'</td>', '</tr>'
									].join(''));

									//单个重传
									tr.find('.demo-reload').on('click', function() {
										obj.upload(index, file);
									});

									//删除
									tr.find('.demo-delete').on('click', function() {
										delete files[index]; //删除对应的文件
										tr.remove();
										uploadListIns.config.elem.next()[0].value =
											''; //清空 input file 值，以免删除后出现同名文件不可选
									});

									that.elemList.append(tr);
									element.render('progress'); //渲染新加的进度条组件
								});
							},
							done: function(res, index, upload) { //成功的回调
								var that = this;
								//if(res.code == 0){ //上传成功
								var tr = that.elemList.find('tr#upload-' + index),
									tds = tr.children();
								tds.eq(3).html(''); //清空操作
								delete this.files[index]; //删除文件队列已经上传成功的文件
								return;
								//}
								this.error(index, upload);
							},
							allDone: function(obj) { //多文件上传完毕后的状态回调
								console.log(obj)
							},
							error: function(index, upload) { //错误回调
								var that = this;
								var tr = that.elemList.find('tr#upload-' + index),
									tds = tr.children();
								tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
							},
							progress: function(n, elem, e, index) {
								element.progress('progress-demo-' + index, n + '%'); //执行进度条。n 即为返回的进度百分比
							}
						});
					}
				}
				/* 
					1.用户填写表单
					2.点击提交->获取填写的数据->存入数据库				 
				 */

				//监听提交
				form.on('submit(demo1)', function(data) {
					var json = render.getFormData();
					console.log("填写的数据（json数组）:" + JSON.stringify(json));
					const obj = json
					var str = [];
					console.log("容器的数据:" + str)
					/* layer.msg(JSON.stringify(json), {
						icon: 6
					}); */
					console.log("我是json：" + json)
					
					/* 往数据库存表单信息 */
					var d = json; //表单中的数据，定义一个对象来接收
					console.log("我是用户填的数据:" + d)
					var url = globalData.server + './become/addBecomeForm/'+globalData.getUid();
					$.post(url, d, function(data) {
						console.log(data);
						if (data.count > 0) {
							var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
							parent.layer.close(index); //再执行关闭   

						} else {
							layer.msg("提交成功", {
								icon: 6
							});
						}
					}, "json");
					return false;
				});

				//导入数据
				$('#importJson').on('click', function() {
					layer.open({
						type: 1,
						title: 'JSON模板数据导入',
						id: 'Lay_layer_importjsoncodeview',
						content: $('.importjsoncodeview'),
						area: ['800px', '640px'],
						shade: false,
						resize: false,
						success: function(layero, index) {},
						end: function() {
							$('.importjsoncodeview').css("display", "none")
						}
					});
				});

				//导入数据
				$('#getFormData').on('click', function() {
					var _value = render.getFormData();
					$('#get-form-data').val(JSON.stringify(_value, null, 4));
					layer.open({
						type: 1,
						title: 'JSON模板数据导入',
						id: 'Lay_layer_importjsoncodeview',
						content: $('.getFormData'),
						area: ['800px', '640px'],
						shade: false,
						resize: false,
						success: function(layero, index) {},
						end: function() {
							$('.getFormData').css("display", "none")
						}
					});
				});

				$('#import-json-code').on('click', function() {
					var _value = document.getElementById("import-json-code-view").value;
					try {
						var json = JSON.parse(_value);
						render.setFormData(json);
						layer.closeAll();
						layer.msg('导入成功');
					} catch (e) {
						layer.closeAll();
						layer.msg('导入数据格式异常');
					}
				});

				$('#globalDisable').on('click', function() {
					render.globalDisable();
				});
				$('#globalNoDisable').on('click', function() {
					render.globalNoDisable();
				});
			});


			function getSubmitData() {
				var data = $('#testdemo').form[0].serialize();
				console.log("---s-s-s--s-s-s-s-s-ss:" + data);
				return data;
			}
		</script>
	</body>

</html>
